<template>
	<view class="u-footer" :style="{paddingBottom: isIPhoneX + 'rpx'}">
		<view class="footerItem" v-for="(item) in tabbarlist" :class="props.active == item.id?'seclct':''"
			:key='item.id' @tap="switchtab(item)">
			<view class="iconbox">
				<image :src="item.iconAC" v-if="props.active == item.id" class="icon"></image>
				<image :src="item.icon" v-else class="icon"></image>
			</view>
			<view class="text">{{item.name}}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, computed } from 'vue';
	
	const props = defineProps({
		active: {
			type: Number,
			default: 1
		},
	})
	const tabbarlist = reactive([
		{
			name: '首页',
			iconAC: 'https://www.ldxs.info/static/tab/home_active.png',
			icon: 'https://www.ldxs.info/static/tab/home.png',
			url: '/pages/home/home',
			type: 'menu',
			id: 1
		},
		{
			name: '商城',
			iconAC: 'https://www.ldxs.info/static/tab/shopping_active',
			icon: 'https://www.ldxs.info/static/tab/shopping.png',
			url: '',
			type: 'btn',
			id: 2
		},
		{
			name: '我的',
			iconAC: 'https://www.ldxs.info/static/tab/mine_active.png',
			icon: 'https://www.ldxs.info/static/tab/mine.png',
			url: '/pages/mine/mine',
			type: 'menu',
			id: 3
		},
	])
	const switchtab = (item: any) => {
		console.log(item.type)
		if (item.type === 'menu') {
			uni.switchTab({
				url: item.url,
			});
		} else {
			// uni.reLaunch({
			// 	url: item.url,
			// })
			uni.navigateToMiniProgram({
				appId: 'wxc72b0171ffddb8f7',
				success(res) {
					// 打开成功
				}
			})
		}
	}
	let safeAreaHeight = ref<number>(0)
	let safeAreaBottom = ref<number>(0)
	const isIPhoneX = computed(() => {
		if(safeAreaHeight.value != safeAreaBottom.value){
			return 40
		} else {
			return 0
		}
	})
	const init = () => {
		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					safeAreaHeight.value = res.screenHeight
					safeAreaBottom.value = res.safeArea.bottom
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err)
				}
			})
		}, 10)
	}
	onMounted(() => {
		init()
	})
	
</script>
<style lang="scss" scoped>
	.u-footer {
		display: flex;
		align-items: flex-end;
		box-sizing: content-box;
		position: fixed;
		padding-top: 10rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		bottom: 0;
		z-index: 9999;
		width: 100%;
		height: 100rpx;
		background: #FAF8F6;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(77,87,7,0.13);
	}
	
	.footerItem{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 0rpx;
		.text{
			font-family: Songti SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.iconbox{
		width: 62rpx;
		height:58rpx;
		
	}
	.iconbox image {
		width: 62rpx;
		height:58rpx;
		position: relative;
		z-index: 1;
	}
	.seclct .seclctbgimage {
		width: 115rpx;
		height:109rpx;
		position: absolute;
		top:-50rpx;
		z-index: -1;
		
	}
	.seclct .text{
		font-family: Songti SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #483D33;
	}
</style>